import React, { useEffect, useState } from "react";
import { Card, Col, Row, Statistic } from "antd";
import sendFetch from "@/fetch"

export default function GoodsInfo() {
  interface DataType{
    user_count:number,
    good_count:number,
    order_count:number,
  }

    const [data,setData] = useState<DataType>({user_count:0,good_count:0,order_count:0})

    const reqInfo = ()=>{
        sendFetch(`/manager/getBoardInfo`).then((t:any)=>{
            setData({
                user_count:t.user_count,
                order_count:t.order_count,
                good_count:t.good_count,
            })
        })
    }

    useEffect(()=>{
        reqInfo()
    },[])

  return (
    <div>
      <Row gutter={16}>
        <Col span={8}>
          <Card>
            <Statistic
              title="用户数"
              value={data.user_count}
              valueStyle={{ color: "#3f8600" }}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="商品数"
              value={data.good_count}
              valueStyle={{ color: "#cf1322" }}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="订单数"
              value={data.order_count}
              valueStyle={{ color: "#cf1322" }}
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
}
